<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM剩余的查询方法</title>
    <script>
        window.onload = function() {
            // 在document中有一个属性body，它保存的是body的引用
            // var body = document.body;
            // alert(body);
            // 在document中有一个属性documentElement，用来保存html根标签
            // var html = document.documentElement;
            // alert(html);
            // 获取当前页面的所有元素以集合的方式返回
            // document.getElementsByTagName("*")等同于document.all
            // var all = document.all;
            // console.log(all);
            // var all = document.getElementsByTagName("*");
            // console.log(all);


            // 根据元素的class属性来查询一组元素节点对象以集合的方式返回
            // 注意：只支持IE8以上版本
            // var box1 = document.getElementsByClassName("box1");
            // console.log(box1);


            // 获取页面中所有的div
            // var divs = document.getElementsByTagName("div");
            // 获取class为box1中所有的div
            // 查询选择器 
            // document.querySelector()
            // --根据一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
            // 该方法只会返回第一个满足条件的
            // var div = document.querySelector(".box1 div");
            // console.log(div.innerHTML);
            //querySelectorAll使用方法和querSelector使用方法差不多
            // 不同的是他会将满足条件的元素封装到一个数组中返回
            // var div = document.querySelectorAll("#one");
            // 即使只有一个满足条件他也会以数组的方式来返回
            var div = document.querySelectorAll(".box1 div");
            console.log(div[0].innerHTML);
        }
    </script>
</head>

<body>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>

    <div class="box1">
        <div>我是box1中的div</div>
    </div>

    <div id="one">
        <div>我是box1中的div</div>
    </div>
</body>

</html>